<template>
    <div class="content">
        <el-upload ref="uploadRef" class="upload" drag action="http://localhost:8080/api/uploadFile"
            :auto-upload="false" :on-exceed="handleExceed" multiple :data="{ filename: fileName, dataSource, remark }"
            name="file" @change="handleChange" :on-success="handleSuccess" :on-error="handleError">
            <template #trigger>
                <el-button type="primary">选择文件</el-button>
            </template>

            <div class="source">
                <span class="label required">选择数据来源</span>
                <el-select v-model="dataSource" placeholder="选择数据来源" size="large" style="width: 240px">
                    <el-option v-for="item in dataSourceOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <br />

                <span class="label remark">备注</span>
                <br />
                <el-input v-model="remark" style="width: 100%; margin-top: 8px" :rows="5" type="textarea"
                    placeholder="请输入需要记录的内容..." />
            </div>

            <el-button class="submit" type="success" @click="submitUpload"> 提交上传 </el-button>

            <template #tip>
                <div class="el-upload__tip">请上传账单表格文档</div>
            </template>
        </el-upload>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { genFileId, ElMessage } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";

const uploadRef = ref<UploadInstance>();
const fileName = ref(""); // 初始化为空字符串
const dataSource = ref("");
const remark = ref("");
const dataSourceOptions = [
    {
        value: "alipay",
        label: "支付宝",
    },
    {
        value: "wechat",
        label: "微信",
    },
    {
        value: "custom",
        label: "自定义",
    },
];

// 处理文件选择变化
const handleChange = (param: any) => {
    const files = param;
    fileName.value = files.name; // 获取第一个文件的名字
};

const handleExceed: UploadProps["onExceed"] = (files) => {
    uploadRef.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    uploadRef.value!.handleStart(file);
};

const submitUpload = () => {
    if (dataSource.value === "") {
        ElMessage.error("请选择数据来源");
        return;
    }
    if (fileName.value === "") {
        ElMessage.error("请选择文件");
        return;
    }
    uploadRef.value!.submit();
};

// 文件上传成功的处理函数
const handleSuccess: UploadProps["onSuccess"] = () => {
    ElMessage.success("文件上传成功");
    dataSource.value = ""; // 清空文件名
    uploadRef.value!.clearFiles();
};

// 文件上传失败的处理函数
const handleError: UploadProps["onError"] = () => {
    ElMessage.error("文件上传失败");
};

</script>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .upload {
        width: 50%;
        height: 525px;
        margin-top: 0px;

        .el-upload {
            --el-upload-dragger-padding-horizontal: 120px;
        }
    }

    .submit {
        margin-top: 20px;
    }

    .source {
        margin-top: 20px;

        .label {
            margin-right: 10px;
        }

        .required::before {
            content: "*";
            color: red;
            margin-right: 8px;
            display: inline-block;
        }

        .remark {
            margin-top: 20px;
            display: inline-block;
        }
    }

}
</style>
